<!-- 商品列表-> 编辑弹窗  -->
<template>
 <el-dialog v-model="editVis" title="编辑商品信息" width="60%" v-if="editBool" >
    <!-- 表单 -->
    <el-form
    :model="ruleForm"
    :rules="rules"
  >
  <el-form-item label="商品名称：" prop="name">
    <el-input v-model="ruleForm.name" clearable  @change="editChange"  />
  </el-form-item>
  <el-form-item label="商品价格：" prop="name">
    <el-input v-model="ruleForm.price" clearable  @change="editChange"  />
  </el-form-item>
  <el-form-item label="商品重量：" prop="name">
    <el-input v-model="ruleForm.wegihts" clearable  @change="editChange"  />
  </el-form-item>
  <!-- <el-form-item label="商品名称：" prop="name">
    <el-input v-model="ruleForm.name" clearable  @change="editChange"  />
  </el-form-item> -->
</el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editBool = false">取消</el-button>
        <el-button type="primary" @click="editVis"
          >确定</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 弹窗++++++
import { ElMessageBox ,ElMessage} from 'element-plus'
let editBool = ref(false)

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '内容不能为空', trigger: 'blur' }
  ]})

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
// }


// 表单信息
// 表单内的值
const ruleForm = reactive({
  name: '',
  price:'',
  wegihts:''
})
const errXi = () => {
    ElMessage.error('不能为空！！！')
} 

const editChange = ()=>{
  console.log(ruleForm.name)
 
}
// 按钮确定
const editVis = ()=> {
  if(ruleForm.name=='' || ruleForm.price=='' || ruleForm.wegihts==''){
    // editBool.value = false
    errXi()
    console.log("空值")
  }else if(ruleForm.name){
    // 存在数值，就打印
    editBool.value = false
    console.log("存在值，打印了",ruleForm.name,ruleForm.price,ruleForm.wegihts)
  }else{
    
  }
}

// 取消
const editFalse = ()=>{
  editBool.value = false
  console.log("取消了")
}


</script>

<style scoped>
/* 弹窗 */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>